<template>
    <div class="Book">
        <div class="head">
            <h1 class="title">预约管理</h1>
        </div>
        <div class="container">
            <div>
                <el-card>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <!-- 搜索与添加区域 -->
                            <el-input placeholder="请输入预约日期" v-model="queryInfo.time" clearable @clear="clear">
                                <template #append>
                                    <el-button @click="getList"><el-icon><search /></el-icon></el-button>
                                </template>
                            </el-input>
                        </el-col>
                    </el-row>

                    <el-button class="resetBTN" type="primary" size="middle" @click="clear" plain>重置</el-button>
                    <el-table :data="selectedInformation">
                        <el-table-column label="预约ID" prop="appointmentId" width="150px">
                            <template v-slot="scope">
                                <el-input v-model="scope.row.appointmentId" v-if="scope.row.seen"></el-input>
                                <span style="margin-left: 10px" v-else>{{ scope.row.appointmentId }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="患者ID" prop="patientId" width="80px">
                            <template v-slot="scope">
                                <el-input v-model="scope.row.patientId" v-if="scope.row.seen"></el-input>
                                <span style="margin-left: 10px" v-else>{{ scope.row.patientId }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="患者姓名" prop="patientName" width="80px">
                            <template v-slot="scope">
                                <el-input v-model="scope.row.patientName" v-if="scope.row.seen"></el-input>
                                <span style="margin-left: 10px" v-else>{{ scope.row.patientName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="预约日期" prop="appointmentTime" width="150px">
                            <template v-slot="scope">
                                <el-input v-model="scope.row.appointmentTime" v-if="scope.row.seen"></el-input>
                                <span style="margin-left: 10px" v-else>{{ scope.row.appointmentTime.slice(0, 10) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="病情描述" prop="description" width="480px">
                            <template v-slot="scope">
                                <el-input v-model="scope.row.description" v-if="scope.row.seen"></el-input>
                                <span style="margin-left: 10px" v-else>{{ scope.row.description }}</span>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-row>
                        <el-col :span="24">
                            <div style="padding-top: 20px;">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                    :current-page="currentPage" :page-sizes="[5, 10, 50, 100]" :page-size="pagesize"
                                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                                </el-pagination>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
import { ElMessage } from 'element-plus';
import { mapMutations } from 'vuex';
import axios from 'axios';
import moment from 'moment';

export default {
    data() {
        return {
            name: this.$store.state.userName,
            id: this.$store.state.id,
            deleteIdNumber: '',
            patientInformation: [],
            selectedInformation: [],
            searchInformation: [],
            currentPage: 1,
            pagesize: 5,
            total: 0,
            patientId: null,
            isSearch: false,
            findSearch: false,
            queryInfo: {
                time: "",
                pagenum: 1,
                pagesize: 5
            },
            finish: 0,
        };
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.getPatientInformation();
            this.currentPage = 1;
            setTimeout(() => {
                this.selectPage();
            }, 10);
            setTimeout(() => {
                this.selectPage();
            }, 50);

            this.selectPage();
        },
        clear() {
            this.findSearch = false;
            this.queryInfo.time = "";
            this.selectPage();
        },
        getList() {
            this.findSearch = true;
            this.searchInformation = [];
            for (let i = 0; i < this.patientInformation.length; i++) {
                if (this.queryInfo.time === this.patientInformation[i].appointmentTime.slice(0, 10)) {
                    this.searchInformation.push({
                        appointmentId: this.patientInformation[i].appointmentId,
                        patientId: this.patientInformation[i].patientId,
                        patientName: this.patientInformation[i].patientName,
                        appointmentTime: this.patientInformation[i].appointmentTime,
                        description: this.patientInformation[i].description,
                    });
                }
            }
            this.total = this.searchInformation.length;
            this.selectPage();
        },
        getPatientInformation() {
            this.loading = true;
            let _this = this;
            this.finish = 0;
            axios.get('http://localhost:8085/api/appointment/getByDoctorId', {
                params: {
                    doctorId: this.id
                }
            }).then((res) => {
                if (res.data) {
                    this.patientInformation = res.data;
                    this.total = this.patientInformation.length;
                    console.log(this.patientInformation);
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: "warning",
                    });
                }
                _this.loading = false;
                this.finish = 1;
            });
        },
        selectPage() {
            this.selectedInformation = [];

            if (this.findSearch) {
                for (let i = (this.currentPage - 1) * this.pagesize; i < this.searchInformation.length; i++) {
                    if (i === this.currentPage * this.pagesize) break;
                    this.selectedInformation.push({
                        appointmentId: this.searchInformation[i].appointmentId,
                        patientId: this.searchInformation[i].patientId,
                        patientName: this.searchInformation[i].patientName,
                        appointmentTime: this.searchInformation[i].appointmentTime,
                        description: this.searchInformation[i].description,
                    });
                }
                this.total = this.searchInformation.length;
            } else {
                this.total = this.patientInformation.length;
                for (let i = (this.currentPage - 1) * this.pagesize; i < this.patientInformation.length; i++) {
                    if (i === this.currentPage * this.pagesize) break;
                    this.selectedInformation.push({
                        appointmentId: this.patientInformation[i].appointmentId,
                        patientId: this.patientInformation[i].patientId,
                        patientName: this.patientInformation[i].patientName,
                        appointmentTime: this.patientInformation[i].appointmentTime,
                        description: this.patientInformation[i].description,
                    });
                }
            }
        },
        handleSizeChange(size) {
            this.pagesize = size;
            console.log(this.pagesize);
            this.selectPage();
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            console.log(this.currentPage);
            this.selectPage();
        }
    }
};
</script>

<style scoped>
.home {
    text-align: center;
    margin-top: 10%;
}

.item img {
    max-width: 80%;
    height: auto;
    cursor: pointer;
}

.container {
    display: flex;
    margin-top: 2em;
}

.item {
    flex: 1;
    margin: 0 1em;
    text-align: center;
}

.modal {
    display: block;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: 60%;
    max-width: 80%;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.searchBTN {
    position: relative;
    left: -200px;
    top: -6px;
}

.resetBTN {
    position: relative;
    left: -130px;
    top: -32px;
}
</style>
